8e:I[903690,["/chat-static/_next/static/chunks/0n6wllg1x756a.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/36mpl_ygnfrn4.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3xrj_hsp3fmgn.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2eciheds0i9z4.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1xhlcoq4t-oxn.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3c4glqozsbxzk.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3u--blmtci52c.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0294hnotirvvk.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0scabqnj4rm2y.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/127p2zuv79gkk.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2zak2d_u5iko3.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1yvds7jeqjq8i.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/32f_k_-32djl6.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/021p7s48npd_b.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/23yvy8dlp236r.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/33l5-m17rt5om.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3xuq22wvkumrj.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0xrdaexm-i9k8.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/chunks/0n6wllg1x756a.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/36mpl_ygnfrn4.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/035w0wg2gxyor.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0mi4y0w4pl0wu.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2q7fs4m_uamv5.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/14v7b-gixg9wk.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3xrj_hsp3fmgn.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1xdkpdc84l3q9.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2eciheds0i9z4.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/34jb4285p3p7e.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1xhlcoq4t-oxn.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1jfrn9u40szv6.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3c4glqozsbxzk.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2kohmem-6ngwr.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3u--blmtci52c.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3bbsz6yb3u_4l.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0g1vo6dajj3ur.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0w7-fmksgb7nb.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3wi82p7qvjxfb.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1z4v54v0ctlnj.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2sjnzs7s258hc.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0294hnotirvvk.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0scabqnj4rm2y.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1d5cm3g8z-wmq.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1q89dw-c_44o_.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2cjw3-k1vrcs3.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/29z3h6t0tfllm.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/127p2zuv79gkk.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2zak2d_u5iko3.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1ywag30-9ka99.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3qg3qz7pjnemd.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2gumkeigv5cf6.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1yvds7jeqjq8i.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/32f_k_-32djl6.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/1lq145b3vyg4-.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/021p7s48npd_b.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/23yvy8dlp236r.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/33l5-m17rt5om.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/2_ncwtp5_4p4i.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/3xuq22wvkumrj.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/112s1d0t63y17.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ","/chat-static/_next/static/chunks/0xrdaexm-i9k8.js?dpl=dpl_cMBp9DGjzWciaDh9SVpwugcNPqAJ"],"SWRDataProvider"] 90:T22ba,[V0_FILE]typescriptreact:file="hooks/use-click-away.ts" isMerged="true" import { useEffect, type RefObject } from "react" export function useClickAway(ref: RefObject, handler: (event: MouseEvent | TouchEvent) => void) { useEffect(() => { const listener = (event: MouseEvent | TouchEvent) => { if (!ref.current || ref.current.contains(event.target as Node)) { return } handler(event) } document.addEventListener("mousedown", listener) document.addEventListener("touchstart", listener) return () => { document.removeEventListener("mousedown", listener) document.removeEventListener("touchstart", listener) } }, [ref, handler]) } [V0_FILE]typescriptreact:file="fluid-dropdown.tsx" isEdit="true" isQuickEdit="true" "use client" import * as React from "react" import { motion, AnimatePresence, MotionConfig } from "framer-motion" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" import { ChevronDown, Shirt, Briefcase, Smartphone, Home, Layers } from "lucide-react" import { useClickAway } from "@/hooks/use-click-away" interface Category { id: string label: string icon: React.ElementType color: string } const categories: Category[] = [ { id: "all", label: "All", icon: Layers, color: "#A06CD5" }, { id: "lifestyle", label: "Lifestyle", icon: Shirt, color: "#FF6B6B" }, { id: "desk", label: "Desk", icon: Briefcase, color: "#4ECDC4" }, { id: "tech", label: "Tech", icon: Smartphone, color: "#45B7D1" }, { id: "home", label: "Home", icon: Home, color: "#F9C74F" }, ] const IconWrapper = ({ icon: Icon, isHovered, color, }: { icon: React.ElementType; isHovered: boolean; color: string }) => ( {isHovered && ( )} ) const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { when: "beforeChildren", staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, y: -10 }, visible: { opacity: 1, y: 0, transition: { duration: 0.3, ease: [0.25, 0.1, 0.25, 1], }, }, } export default function FluidDropdown() { const [isOpen, setIsOpen] = React.useState(false) const [selectedCategory, setSelectedCategory] = React.useState(categories[0]) // Default to "All" const [hoveredCategory, setHoveredCategory] = React.useState(null) const dropdownRef = React.useRef(null) // Handle click outside to close dropdown useClickAway(dropdownRef, () => setIsOpen(false)) // Handle keyboard navigation const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Escape") { setIsOpen(false) } } return (

{isOpen && ( (hoveredCategory || selectedCategory.id) === c.id) * 40 + (categories.findIndex((c) => (hoveredCategory || selectedCategory.id) === c.id) > 0 ? 20 : 0), height: 40, }} transition={{ type: "spring", bounce: 0.15, duration: 0.5, }} /> {categories.map((category, index) => ( {index === 1 && ( )} { setSelectedCategory(category) setIsOpen(false) }} onHoverStart={() => setHoveredCategory(category.id)} onHoverEnd={() => setHoveredCategory(null)} className={cn( "relative flex w-full items-center px-4 py-2.5 text-sm rounded-md", "transition-colors duration-150", "focus:outline-none", selectedCategory.id === category.id || hoveredCategory === category.id ? "text-neutral-200" : "text-neutral-400", )} whileTap={{ scale: 0.98 }} variants={itemVariants} > {category.label} ))} )}

) } 85:["$","$L8e",null,{"chatId":"qNKP5oMDfot","children":["$","$L8f",null,{"data":{"@\"active-block\",\"qNKP5oMDfot\",":{"id":"b_4Vikr2rlnUj","messageId":"N3XsC1uUtKGOg2PZu3Q8XhcIIWVNkIvZ","source":"$90","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"fluid-dropdown","type":"code-project","project":"fluid-dropdown"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"qNKP5oMDfot\",":false,"":null},"children":"$L91"}]}]

About

Tags

Share

About

Tags

Share

More from spoony

More Templates Like This